<template>
  <div>
    角色名称：
    <el-input v-model="name" size="small" placeholder="请输入角色名称" style="width:200px"></el-input>
    <el-button type="primary" size="small" @click="getUserRoleList()">搜索</el-button>

    <el-button type="primary" fixed="right" size="small" @click="updFlag = true">添加</el-button>
    <el-table :data="tableData" style="width: 100%" max-height="600">
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
      <el-table-column prop="password" label="密码" width="150"></el-table-column>
      <el-table-column prop="trueName" label="真实姓名" width="150"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
      <el-table-column prop="name" label="拥有角色" width="300"></el-table-column>
      <el-table-column fixed="right" label="角色设置" width="300">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="delRole(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="afterUpd(scope.row)">修改</el-button>
          <el-button @click="look(scope.row)" type="text" size="small">角色设置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="权限" :visible.sync="upmsFlag">
      <el-tree
        :data="menuList"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="[10,20,30,40,50,60]"
        :default-checked-keys="roleMenuList"
        :props="defaultProps"
      ></el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="upmsFlag = false">取 消</el-button>
        <el-button type="primary" @click="submitRoleMenu">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="updFlag">
      <el-form>
        <el-input v-model="updateBean.id" type="hidden" autocomplete="off"></el-input>
        <el-form-item label="用户名">
          <el-input v-model="updateBean.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="updateBean.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="updateBean.trueName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="updateBean.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFlag = false">取 消</el-button>
        <el-button type="primary" @click="upd">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  methods: {
    getUserRoleList() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tUser/userRoleList",
        params: {
          userName: $this.name,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        console.log(res);
        $this.tableData = res.data.obj;
      });
    },
    look(row) {
      var $this = this;
      $this.userid = row.id;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tUser/getRoleByUserid",
        params: {
          id: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.roleMenuList = res.data.obj;
        $this.getMenu();
        $this.upmsFlag = true;
      });
    },
    afterUpd(row) {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tUser/getRoleById",
        params: {
          id: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.updateBean = res.data.obj;
        $this.updFlag = true;
      });
    },
    upd() {
      var $this = this;
      var userBean = $this.updateBean;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tUser/insertOrUpdateUser",
        params: {
          id: $this.updateBean.id,
          userName: $this.updateBean.userName,
          trueName: $this.updateBean.trueName,
          password: $this.updateBean.password,
          remarks: $this.updateBean.remarks,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.getUserRoleList();
          $this.roleMenuList = [];
          $this.updateBean = "";
          $this.updFlag = false;
        }
      });
    },
    delRole(row) {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tUser/delUser",
        params: {
          id: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.getUserRoleList();
        }
      });
    },
    getMenu() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/upms/tRole/roleMenuList",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.menuList = res.data.obj;
        console.log($this.menuList);
      });
    },
    submitRoleMenu() {
      console.log(this.$refs.tree.getCheckedKeys());
      var mrlist = [];
      mrlist = this.$refs.tree.getCheckedKeys();
      console.log(mrlist);
      var $this = this;
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/upms/tUserRole/updateRole?roleids=" +
          mrlist,
        params: {
          userid: $this.userid,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.$message(res.data.msg);
        if (res.data.code == 200) {
          $this.upmsFlag = false;
          $this.getUserRoleList();
        }
      });
    }
  },
  data() {
    return {
      tableData: [],
      defaultProps: {
        label: "name"
      },
      menuList: [],
      roleMenuList: [],
      upmsFlag: false,
      updFlag: false,
      updateBean: {},
      userid: "",
      name: ""
    };
  },
  mounted() {
    this.getUserRoleList();
  }
};
</script>
